<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>云控</title>
	<style type="text/css">
		.caozuo{
			position: fixed;
			bottom: 0;
			left: 0;
			height: auto;
			background-color: #ccc;
			width: 100%;
		}
		.caozuo input{
			font-size: 30px;
		}
		.caozuo input[type=text]{
			width: 100%;
		}
		.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: 300px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 150px;
    height: auto;
    margin: 3px;
}
.flex-item-list {
    background-color: white;
    width: 100%;
    height: auto;
    margin: 3px;
}
	</style>
</head>

<body>
	<h1>群控管理：<span id="yonghu"><%=userName%></span></h1>
	<div class="flex-container">
			<div class="flex-item">
				设备
				<ul class="message">
				</ul>
			</div>
			<div class="flex-item-list">
				记录
				<ul class="liebiao">
				</ul>
			</div>
	</div>
	<div class="caozuo">
		<form action="/check" method="get">
			输入群号：
			<input type="text" id="group" name="group">
			<input  type="submit" id="join" value="进入群">
			<script type="text/javascript">
			</script>
		</form>
		<button  id="leave" onclick="leave()" >离开群</button>
		
			<b>输入群名</b>
		<input type="text" id="ren" placeholder="用户名 或 群号"/>
		<input type="text" id="content" placeholder="发送内容"/>
		<input type="submit" id="submit" onclick="send()">
	</div>

	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
					
		var socket = io();
		function leave(){
		  var group= $("#group").val();
		  console.log(group)
			console.log("离开群")
			socket.emit("")
		}
		$("#content").keydown(function(e){
			if(e.keyCode == 13){
				//把文本框的内容上传：
				socket.emit("liaotian",{
					"neirong" : $("#content").val(),
					"ren" : $("#yonghu").html()
				});
				$(this).val("");
			}
		});
		function send(){

		}
    	socket.on("siliao",function(msg){
			$(".liebiao").prepend("<li><b>私聊" + msg.ren + "：</b>"+ msg.neirong + "</li>");
		});
		socket.on("liaotian",function(msg){
			$(".liebiao").prepend("<li><b>群聊" + msg.ren + "：</b>"+ msg.neirong + "</li>");
		});
	</script>
</body>
</html>